<html>
<head>
    <title>My Web Page</title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        // run the function below once the DOM(Document Object Model) is ready
        $(document).ready(function() {
            // trigger the function when clicking on an assigned element
            $(".toggle").click(function () {
                // check the visibility of the next element in the DOM
                if ($(this).next().is(":hidden")) {
                    $(this).next().slideDown("fast"); // slide it down
                } else {
                    $(this).next().hide(); // hide it
                }
            });
        });
    </script>
    <style type="text/css">
        .hiddenDiv{
            display:none;
        }
    </style>
</head>
<!-- Start Web Page Body -->
<body>
Here is content section 1
<span class="toggle">
<a href="#" style="cursor:pointer;">show hidden container</a>
</span>
<div class="hiddenDiv" style="border:#030 1px solid; background-color:#CEFFDB; width:350px;">
    Content I want to hide then slide into view for section 1
    <br /><br />
    I can put any website elements I wish to in here, and style it any way I please.
</div>
<hr />
Here is content section 2
<span class="toggle">
<a href="#" style="cursor:pointer;" onClick="return false">show hidden container</a>
</span>
<div class="hiddenDiv" style="border:#06C 1px solid; background-color:#CEE7FF; width:350px;">
    Content I want to hide then slide into view for section 2
    <br /><br />
    I can put any website elements I wish to in here, and style it any way I please.
</div>
<hr />
</body>
</html> 